<template>
  <el-drawer
    :title="textMap[dialogStatus]"
    :visible.sync="visibility"
    size="61%"
  >
    <el-form
      ref="dataForm"
      :model="temp"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item label="项目" prop="goodsCode">
        <span v-if="temp.goodsCode"
          >{{ temp.goodsCode }}, {{ temp.goodsAbbr }},
          {{ temp.goodsFullCode }}</span
        >
        <el-button
          icon="el-icon-thumb"
          size="mini"
          circle
          class="custome-el-button-circle"
          @click="handleOpenSearchProductionGoodsDialog"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model.trim="temp.memo" />
      </el-form-item>
      <el-form-item label="参考文档" prop="isGoodsListLength">
        <el-button
          icon="el-icon-plus"
          size="mini"
          circle
          class="custome-el-button-circle"
          @click="handleOpenSetFileDialog"
        />
        <el-table
          v-if="fileList.length > 0"
          :data="fileList"
          highlight-current-row
          style="width: 100%; overflow: scroll"
        >
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              <!-- <span
                  v-if="scope.row.folderName"
                  style="cursor: pointer"
                  @click="childFile(scope.row)"
                >
                  <svg class="icon" aria-hidden="true">
                    <use
                      :xlink:href="iconType(scope.row.fileExtension).class"
                    />
                  </svg>
                  {{ scope.row.folderName }}</span
                > -->
              <span
                v-if="scope.row.documentName"
                style="cursor: pointer"
                @click="openDocument(scope.row)"
                ><svg class="icon" aria-hidden="true">
                  <use
                    :xlink:href="iconType(scope.row.fileExtension).class"
                  /></svg
                >{{ scope.row.documentName }}{{ scope.row.fileExtension }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="70" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="my-but"
                @click="deleteFileList(scope.row, scope.$index)"
                ><i class="el-icon-remove-outline" />
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
    <SearchGoods
      :visible.sync="searchGoodsDialogVisible"
      :show-goods-batch="false"
      :immediate="searchGoodsMode === 'productionGoods'"
      @success="handleSearchGoods"
    />
    <SetFile
      ref="setFileRef"
      :visible.sync="setFileDialogVisible"
      @success="handleSetFile"
    />
  </el-drawer>
</template>

<script>
import { saveTechnique, updateTechnique } from '@/api/xd/technique'

import SearchGoods from '@/components/SearchGoods'
import SetFile from '@/views/manufacture/components/SetFile'
import { unity } from '@/styles/js/setIconType.js'
import { fromBase64X } from '@/utils/string-util'

export default {
  components: { SearchGoods, SetFile },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    currentRow: {
      type: Object,
      default: null
    },
    dialogStatus: {
      require: true,
      type: String,
      default: 'create'
    },
    categoryOptions: {
      type: Array,
      default: null
    },
    scope: {
      type: String,
      default: null
    }
  },
  data() {
    const isLength = (rule, value, callback) => {
      if (this.fileList.length > 0) {
        callback()
      } else {
        return callback(new Error('物料清单不可为空'))
      }
    }
    const isCodeLength = (rule, value, callback) => {
      if (this.temp.goodsCode) {
        callback()
      } else {
        return callback(new Error('生产项目不可为空'))
      }
    }
    return {
      iconType: unity.setIconType,
      searchGoodsMode: null,
      temp: {},
      rules: {
        goodsCode: [
          { required: true, validator: isCodeLength, trigger: 'blur' }
        ],
        isGoodsListLength: [
          {
            validator: isLength,
            required: true,
            trigger: 'change'
          }
        ],
        count: [
          { required: true, message: '项目货号不能为空', trigger: 'blur' }
        ]
      },
      textMap: {
        update: '修改生产工艺',
        create: '新增生产工艺'
      },
      loading: false,
      searchGoodsDialogVisible: false,
      setFileDialogVisible: false,
      fileList: []
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value && this.dialogStatus === 'create') {
        this.temp = {
          goodsList: []
        }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }
      const scope = this.scope
      console.log(scope, '888888888')
      if (Number(this.scope) === 3) {
        this.textMap = {
          update: '修改质量标准',
          create: '新增质量标准'
        }
      }
    },
    currentRow: {
      handler(value) {
        if (value && this.dialogStatus === 'update') {
          this.temp = Object.assign({}, value)
          this.fileList = value.techniqueDocumentList
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    createData() {
      this.loading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const techniqueDocument = this.extractDocumentId(this.fileList)
          const data = {
            scope: this.scope,
            goodsId: this.temp.goodsId,
            techniqueDocumentList: techniqueDocument
          }
          saveTechnique(data)
            .then(() => {
              this.visibility = false
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$emit('saveData', {})
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    updateData() {
      this.loading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = {
            techniqueId: this.temp.techniqueId,
            goodsId: this.temp.goodsId,
            techniqueDocumentList: this.temp.techniqueDocumentList
          }

          updateTechnique(tempData)
            .then(() => {
              this.visibility = false
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.$emit('saveData', tempData)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    handleOpenSearchProductionGoodsDialog() {
      this.searchGoodsMode = 'productionGoods'
      this.searchGoodsDialogVisible = true
    },
    handleOpenSetFileDialog() {
      this.setFileDialogVisible = true
    },
    handleSearchGoods(goods) {
      this.temp.goodsId = goods.goodsId
      this.temp.goodsCode = goods.goodsCode
      this.temp.goodsFullCode = goods.goodsFullCode
      this.temp.goodsAbbr = goods.goodsAbbr
      this.$refs['dataForm'].clearValidate('goodsCode')
    },
    view(row) {},
    resetValidate(row) {},
    handleSetFile(row) {
      this.fileList = row
      this.$refs['dataForm'].clearValidate('isGoodsListLength')
    },
    openDocument(row) {
      this.$refs['setFileRef'].openDocument(row)
    },
    deleteFileList(row, index) {
      this.fileList.splice(index, 1)
    },
    extractDocumentId(data) {
      const newArr = [{ documentId: '' }]
      data.forEach((e, index) => {
        newArr[index] = { documentId: e.documentId }
      })
      return newArr
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
